<template>
    <div class="financial">
        <el-card class="!border-none" shadow="never">
            <el-button type="primary" size="small" @click="handleAdd">
                <template #icon> <icon name="el-icon-Plus" /> </template>
                新增
            </el-button>
        </el-card>
        <el-card v-loading="pager.loading" class="mt-2 !border-none" shadow="never">
            <mtable
                :data="pager.lists"
                :type="typeTable"
                :list="options.tableTile"
                :operation="true"
                :tableheight="getTableheight"
                :bill="false"
                @handleAdds="handleAdds"
            >
                <template #tool="{ item }">
                    <el-table-column
                        v-if="item.display == 1"
                        sortable
                        :label="item.name"
                        show-overflow-tooltip
                        :prop="item.value"
                        :width="item.width"
                    >
                        <template #="{ row }">
                            <div v-if="item.name === '负责人'">
                                {{ row.leader_text?.map((item) => item.name).join(',') }}
                            </div>
                            <div v-if="item.name === '项目开竣工日期'">
                                {{ row.start_time }} 至 {{ row.end_time }}
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #operation="{ row }">
                    <el-button type="primary" link @click="handleEdit(row)"> 编辑 </el-button>
                    <el-popconfirm title="确定要删除当前请款单位吗?" @confirm="handleDel(row.id)">
                        <template #reference>
                            <el-button type="danger" link> 删除 </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </mtable>
            <div class="flex justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <EdittablePopup v-if="showTable" ref="editRefs" :type="typeTable" @success="getLists" />
        <AddPopup
            v-if="showAddPopup"
            ref="addPopupRef"
            @success="getLists"
            @close="showAddPopup = false"
        />
        <EditPopup
            v-if="showEditPopup"
            ref="editPopupRef"
            @success="getLists"
            @close="showEditPopup = false"
        />
    </div>
</template>
<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import { adminListss, adminDelete } from '@/api/financial/message'
import { getCommonFieldDisplay } from '@/api/tools/code'
import mtable from '@/components/table/index.vue'
import EdittablePopup from '@/components/settable/index.vue'
import AddPopup from './add.vue'
import EditPopup from './edit.vue'
onMounted(() => {
    getLists()
    fetchCommonFieldDisplay()
})
const { pager, getLists } = usePaging({ fetchFun: adminListss })
const options = reactive({ tableTile: [] })
// 表格的最大高度
const getTableheight = computed(() => {
    return parseInt(document.documentElement.clientHeight + '') - 185 + 'px'
})
// 公共的表头字段
const typeTable = 'item_information'
const fetchCommonFieldDisplay = async () => {
    const data = await getCommonFieldDisplay({ type: typeTable })
    options.tableTile = data
    console.log('🚀🚀🚀 公共的表头字段', data)
}
// 设置表头字段弹窗
const showTable = ref(false)
const editRefs = shallowRef<InstanceType<typeof EdittablePopup>>()
const handleAdds = async () => {
    showTable.value = true
    await nextTick()
    editRefs.value?.open('add')
}
// 新增弹窗
const addPopupRef = ref()
const showAddPopup = ref(false)
const handleAdd = async () => {
    showAddPopup.value = true
    await nextTick()
    addPopupRef.value?.open()
}
// 编辑
const editPopupRef = ref()
const showEditPopup = ref(false)
const handleEdit = async (row) => {
    showEditPopup.value = true
    await nextTick()
    editPopupRef.value?.setFormData({ ...row, unit: [...row.project_unit] })
    editPopupRef.value?.open()
}
// 删除
const handleDel = async (id: string) => {
    await adminDelete({ id })
    getLists()
}
</script>
<style scoped lang="scss"></style>
